{extend name="public/base" /}
{block name="head"}
<style type="text/css">
table{color:#666;}
.layui-table th,.layui-table td{text-align: center;}
.layui-table td.userInfo{text-align: left;}
.userInfo img{height: 90px;width: 90px;float: left;margin-right: 20px;}
.userInfo p{margin-top: 13px;}
</style>
{/block}
{block name="body"}
<div id="fuyun-app" class="fuyun-app">
  <div class="search-box">
    <div class="fuyun-title">
      <h5>筛选条件</h5>
    </div>
    <div class="search-content">
      <form action="{:Url('index')}" method="get">
        <div class="fuyun-form-item layui-inline">
          <label>用户昵称</label>
          <input class="layui-input" type="text" name="nickname" placeholder="输入用户昵称" value="{$Request.param.nickname}">
        </div>
        <div class="fuyun-form-item layui-inline" style="padding-top:18px;">
          <button class="layui-btn layui-btn-normal">搜索</button>
        </div>
      </form>
    </div>
  </div>

  <div class="content-box ">
    <div class="fuyun-title">
      <h5>用户列表</h5>
    </div>
    <div class="main-box">
      <div class="layui-form">
        <table class="layui-table layui-form">
          <thead>
            <tr>
              <th width="3%"><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
              <th width="3%">用户id</th>
              <th width="15%">用户信息</th>
              <th width="10%">时间</th>
              <th width="6%">状态</th>
              <th width="6%">操作</th>
            </tr> 
          </thead>
          <tbody>
            {volist name="list['data']" id="vo"}
              <tr data-id="{$vo.id}">
                <td><input type="checkbox" name="id[]" lay-skin="primary" value="{$vo.id}" ></td>
                <td>{$vo.id}</td>
                <td class="userInfo">
                  <img src="{$vo.figureurl}">
                  <p>{$vo.nickname}</p>
                  <p>{$vo.province} {$vo.city}</p>
                </td>
                <td>
                  注册时间：{$vo.create_time}<br/>
                  更新时间：{$vo.update_time}
                </td>
                <td data-status-{$vo.id} >
                  <?php if($vo['status']==1):?>
                    <i class="el-icon-circle-check color-success"></i>
                  <?php else:?>
                    <i class="el-icon-circle-cross color-danger"></i>
                  <?php endif ?>
                </td>
                <td>
                  <div class="layui-btn-group">
                    <!-- <a href="{:Url('detail',['id'=>$vo['id']])}" class="layui-btn layui-btn-small layui-btn-normal">查看详情</a> -->
                    <a class="layui-btn layui-btn-small"  onclick="changeStatus({$vo.id},0)">禁用</a>
                    <a class="layui-btn layui-btn-small layui-btn-danger" onclick="changeStatus({$vo.id},1)">取消禁用</a>
                  </div>
                </td>
              </tr>
            {/volist}
          </tbody>
          <tfoot>
            <tr>
              <th width="2%"><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
              <th colspan="8" class="operator-button" style="text-align:left">
                <button class="layui-btn layui-btn-small" onclick="changeAllStatus(0)">批量禁用</button>
                <button class="layui-btn layui-btn-small layui-btn-danger" onclick="changeAllStatus(1)">批量取消禁用</button>
              </th>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="page-box">
        <fuyun-page v-if="<?=ceil($list['totalRow']/$list['pageSize'])?> > 1"
          :pagesize="<?=$list['pageSize']?>" 
          :total = "<?=$list['totalRow']?>"
          :current-page = {$list['curPage']}
        ></fuyun-page>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    layui.use([ 'layer','form'], function(){
      var layer = layui.layer;
      var form = layui.form();
      //全选
      form.on('checkbox(allChoose)', function(data){
          var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');
          child.each(function(index, item){
              item.checked = data.elem.checked;
          });
          form.render('checkbox');
      });
    });

    fuyun.components(['page'],{
      el:"#fuyun-app",
      data:{
        labelPosition: 'top',
      },
    });

    //单个上下架
    function changeStatus(id, status){
      requestStatus([id], status);
    }

    //批量上下架
    function changeAllStatus(status){
      var ids = [];
      $($("input[name='id[]']")).each(function(){
          if( this.checked ){
            ids.push($(this).val());
          }
      });

      requestStatus(ids, status);
    }

    function requestStatus(ids, status){
      if(ids.length == 0){
      	layer.msg("没有选中需要操作的数据！");
      	return;
      }

      var confirm = status==1?"是否确定取消禁用？":"是否确定禁用？";
      var layerDelIndex = layer.confirm(confirm, {
        btn: ['是','否'] //按钮
      }, function(){
        $.ajax({
          type:'post',
          url: "{:Url('changeStatus')}",
          data:{'id':ids,'status':status},
          dataType:'json',
          success: function(data){
            if(data['status']==200){
              changeStatusIcon(ids, status);
              layer.msg(data['msg']);
              layer.close(layerDelIndex);
            }else{
              layer.msg(data['msg']);
            }

          }
        });
      }, function(){
        return;
      });
    }

    //改变状态图标
    function changeStatusIcon(ids, status){
      var icon_class = status == 1 ? 'el-icon-circle-check color-success':'el-icon-circle-cross color-danger';
      ids.map(function(id){
        $("td[data-status-"+id+"] i").attr("class", icon_class);
        console.log(id);
      });
    }
    

</script>

{/block}
